<template>
  <div class="app-container">
    <el-card>
      <div style="border-bottom: 1px dashed #778899; margin-left: 10px;">
        <div style="margin-left: 60px; margin-bottom: 20px;font-weight: bold">我的公司信息</div>
      </div>
      <div style="margin-left: 100px; margin-top: 20px">
        <el-form ref="form" :model="form" size="small" label-width="80px">
          <el-form-item label="公司名称" prop="nam">
            <el-input v-model="form.name" style="width: 370px;"/>
          </el-form-item>

          <el-form-item label="英文名" prop="foreignName">
            <el-input v-model="form.foreignName" style="width: 370px;"/>
          </el-form-item>

          <el-form-item label="总部地址" prop="city">
            <el-input v-model="form.city" style="width: 370px;"/>
          </el-form-item>

          <el-form-item label="公司logo" prop="img">
            <div style="text-align: center">
              <el-upload
                :show-file-list="false"
                :on-success="handleSuccess"
                :on-error="handleError"
                :headers="headers"
                :action="uploadImgApi"
                class="avatar-uploader"
              >
                <img style="width: 160px; height: 130px"
                     v-if="form.img"
                     :src="baseApi + '/recruit/' + form.img" title="点击上传图片" class="avatar">
                <i style="margin: 50px" v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
          </el-form-item>

          <el-form-item label="公司使命" prop="mission">
            <el-input v-model="form.mission" style="width: 370px;"/>
          </el-form-item>

          <el-form-item label="公司简介" prop="description">
            <el-input v-model="form.description" style="width: 370px;"/>
          </el-form-item>

          <div style="margin-top: 20px; margin-bottom: 20px; margin-left: 10px">
            <div v-if="form.status === 1" style="color: #00a0e9">审核中</div>
            <div v-if="this.form.status === 2" style="color: #13ce66">审核通过</div>
            <div v-if="this.form.status === 3" style="color: #d73a49">审核拒绝</div>
          </div>

        </el-form>
        <div style="margin-left: 10px">
          <el-button
            type="primary"
            @click="submit"
          >
            确认
          </el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import checkPermission from '@/utils/permission'
import { save, getCompany } from '@/api/ceamCompany'

import crudCompany from '@/api/ceamCompany'
import eHeader from './header'
import CRUD, { presenter } from '@crud/crud'
import crudOperation from '@crud/CRUD.operation'
import pagination from '@crud/Pagination'
import udOperation from '@crud/UD.operation'
import { mapGetters } from 'vuex'
import { getToken } from '@/utils/auth'

// crud交由presenter持有
const crud = CRUD({
  title: '我的企业',
  url: 'api/company',
  sort: ['sort,asc', 'id,desc'],
  crudMethod: { ...crudCompany }
})
//const defaultForm = { name: null, count: null, img: '',  carType: { id: null } }
export default {
  components: { eHeader, crudOperation, pagination, udOperation },
  mixins: [presenter(crud)],
  data() {
    return {
      headers: {
        'Authorization': getToken()
      },
      carTypeList: [],
      form: {},
      delLoading: false,
      permission: {
        add: ['admin', 'carInfo:add'],
        edit: ['admin', 'carInfo:edit'],
        del: ['admin', 'carInfo:del']
      }
    }
  },
  created() {
    this.loadCompany();
    // this.$nextTick(() => {
    //   this.init()
    // })
  },
  computed: {
    ...mapGetters([
      'uploadImgApi',
      'baseApi'
    ])
  },
  methods: {
    checkPermission,
    loadCompany() {
      getCompany().then(res => {
        this.form = res;
        console.log("status ==", this.form.status)
      })
    },
    submit() {
      save(this.form).then(res => {
        this.form.status = 1;
        this.$notify({
          title: '成功',
          type: 'success',
          duration: 2500
        })
      }).catch(error => {
        this.$notify({
          title: '失败',
          type: 'danger',
          duration: 2500
        })
      })
    },
    handleSuccess(response, file, fileList) {
      console.log("upload>>", response)
      this.form.img = response;
      this.$notify({
        title: '图片上传成功',
        type: 'success',
        duration: 2500
      })
      store.dispatch('GetInfo').then(() => {})
    },
    // 监听上传失败
    handleError(e, file, fileList) {
      const msg = JSON.parse(e.message)
      this.$notify({
        title: msg.message,
        type: 'error',
        duration: 2500
      })
    },
    // 新增与编辑前做的操作
    [CRUD.HOOK.afterToCU](crud, form) {

    },
    // 打开编辑弹窗前做的操作
    [CRUD.HOOK.beforeToEdit](crud, form) {

    }
  }
}
</script>

<style scoped>
  .avatar-uploader  {
    width: 160px;
    height: 120px;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
</style>
